import React, { Component } from "react";
import { NavBar, Icon } from 'antd-mobile';
import { Tabs } from 'antd-mobile';
import { Card, WhiteSpace } from 'antd-mobile';
import { Flex } from 'antd-mobile';
import "./MyAsset.css"

const tabs = [
    { title: '全部' },
    { title: '进行中' }
];

export default class MyAssetRecord extends Component {
    onChange = (key) => {
        console.log(key);
    }

    render() {
        return (
            <div className="myAsset-div">
                <div>
                    <NavBar
                        mode="light"
                        icon={<Icon type="left" />}
                        onLeftClick={() => window.location.href = '#/terran/mySimulation'}
                        rightContent={[
                            <Icon key="0" type="search" style={{ marginRight: '16px' }} />,
                            <Icon key="1" type="ellipsis" />,
                        ]}
                        style={{position:'relative'}}
                    >交易记录</NavBar>
                </div>

                <div>
                    <Tabs tabs={tabs}
                        initialPage={0}
                        onChange={(tab, index) => { console.log('onChange', index, tab); }}
                        onTabClick={(tab, index) => { console.log('onTabClick', index, tab); }}
                    >
                        <div className='全部'>
                            <WhiteSpace size="lg" />
                            <Card full>
                                <Card.Header
                                    title="华宝创新优选混合"
                                    thumb="https://gw.alipayobjects.com/zos/rmsportal/MRhHctKOineMbKAZslML.jpg"
                                    extra={<div style={{ color: 'black' }}>100.00 元</div>}
                                    thumbStyle={{ height: '20px' }}
                                    style={{marginTop:'10px'}}
                                />
                                <WhiteSpace size="lg" />
                                <Card.Footer content="2020-05-06 08:28:38" extra={<div style={{ color: 'red' }}>定投</div>} />
                            </Card>
                            <Card full>
                                <Card.Header
                                    title="华宝创新优选混合"
                                    thumb="https://gw.alipayobjects.com/zos/rmsportal/MRhHctKOineMbKAZslML.jpg"
                                    extra={<div style={{ color: 'black' }}>100.00 元</div>}
                                    thumbStyle={{ height: '20px' }}
                                    style={{marginTop:'10px'}}
                                />
                                <WhiteSpace size="lg" />
                                <Card.Footer content="2020-04-12 16:46:25" extra={<div style={{ color: 'red' }}>定投</div>} />
                            </Card>
                            <Card full>
                                <Card.Header
                                    title="天弘弘择短债债券C"
                                    thumb="https://gw.alipayobjects.com/zos/rmsportal/MRhHctKOineMbKAZslML.jpg"
                                    extra={<div style={{ color: 'black' }}>150.00 元</div>}
                                    thumbStyle={{ height: '20px' }}
                                    style={{marginTop:'10px'}}
                                />
                                <WhiteSpace size="lg" />
                                <Card.Footer content="2020-04-12 15:39:25" extra={<div style={{ color: 'red' }}>买入</div>} />
                            </Card>
                            <Card full>
                                <Card.Header
                                    title="广发消费品精选混合"
                                    thumb="https://gw.alipayobjects.com/zos/rmsportal/MRhHctKOineMbKAZslML.jpg"
                                    extra={<div style={{ color: 'black' }}>65.70 元</div>}
                                    thumbStyle={{ height: '20px' }}
                                    style={{marginTop:'10px'}}
                                />
                                <WhiteSpace size="lg" />
                                <Card.Footer content="2019-10-26 17:20:15" extra={<div style={{ color: 'blue' }}>卖出</div>} />
                            </Card>
                            <Card full>
                                <Card.Header
                                    title="广发消费品精选混合"
                                    thumb="https://gw.alipayobjects.com/zos/rmsportal/MRhHctKOineMbKAZslML.jpg"
                                    extra={<div style={{ color: 'black' }}>50.00 元</div>}
                                    thumbStyle={{ height: '20px' }}
                                    style={{marginTop:'10px'}}
                                />
                                <WhiteSpace size="lg" />
                                <Card.Footer content="2018-09-14 14:22:42" extra={<div style={{ color: 'red' }}>买入</div>} />
                            </Card>
                        </div>

                        <div className='进行中'>
                            <WhiteSpace size="lg" />
                            <Flex>
                                <Flex.Item><div style={{ textAlign: 'center', color: '#999999', fontSize: '18px' }}>暂无交易记录</div></Flex.Item>
                            </Flex>
                        </div>
                    </Tabs>
                </div>
            </div>
        );
    }
}
